<template>
  <div class="musicPlayer">
    <audio
      ref="audioRef"
      class="audio"
      style="display: none"
      :src="songStore.playMessage.url"
    ></audio>
    <div class="musicPlayer_container sw flex align_c">
      <div class="actions flex align_c">
        <div @click="songListStore.pre">
          <SvgIcon class="pre" :icon="icons.preIcon"></SvgIcon>
        </div>
        <div @click="control">
          <SvgIcon class="play" :icon="icons.playIcon"></SvgIcon>
        </div>
        <div @click="songListStore.next">
          <SvgIcon class="next" :icon="icons.nextIcon"></SvgIcon>
        </div>
      </div>
      <div class="flex">
        <div class="coverBox">
          <img
            class="cover"
            v-if="songStore.curSong.al.picUrl"
            :src="songStore.curSong.al.picUrl"
            alt=""
          />
          <img class="cover" v-else src="../../assets/imgs/cover.png" alt="" />
        </div>
        <div>
          <div class="fs-12 textMes" v-if="songStore.curSong.ar[0]">
            <span class="song_name"> {{ songStore.curSong.name }}</span>
            <span class="song_singer">{{ songStore.curSong.ar[0].name }}</span>
          </div>
          <div class="progess">
            <div class="total">
              <div class="cur" ref="cur"></div>
            </div>
            <span class="time">{{ curtime || `00:00` }}/{{ totalFormat }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'MusicPlayer',
}
</script>

<script lang="ts" setup>
import { useSongStore } from '@/stores/song'
import { ref, reactive, onMounted, watchEffect, watch, computed } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import dayjs from 'dayjs'
import { useSongListStore } from '@/stores/modules/songList'
const audioRef = ref<HTMLAudioElement>()
const cur = ref()
const songStore = useSongStore()
const songListStore = useSongListStore()
//按钮图标
const icons = reactive({
  playIcon: 'icon-bofangqi-bofangshu',

  pauseIcon: 'icon-zanting2',
  preIcon: 'icon-shangyishou',
  nextIcon: 'icon-xiayishou1',
})
//音乐播放器封面

let isplay = false
function play() {
  audioRef.value?.play()
  isplay = true
  icons.playIcon = 'icon-zanting2'
}
function pause() {
  audioRef.value?.pause()
  isplay = false

  icons.playIcon = 'icon-bofangqi-bofangshu'
}
function control() {
  if (!isplay) {
    play()
  } else {
    pause()
  }
}
function formatDuring(millisecond: number) {
  var hours = parseInt(
    (millisecond % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) + ''
  )
  var minutes = parseInt((millisecond % (1000 * 60 * 60)) / (1000 * 60) + '')
  var seconds = parseInt((millisecond % (1000 * 60)) / 1000 + '')
  let m = minutes > 9 ? minutes + '' : `0${minutes}`
  let s = seconds > 9 ? seconds + '' : `0${seconds}`

  return +hours + ':' + m + ':' + s
}
let curtime = ref('')
let total = songStore.playMessage.time
let totalTime = ref(formatDuring(songStore.playMessage.time || 0))

const totalFormat = computed(() => {
  total = songStore.playMessage.time
  return formatDuring(total)
})
watch(
  () => songStore.playMessage.url,
  () => {
    pause()
  }
)
onMounted(() => {
  ;(audioRef.value as HTMLAudioElement).ontimeupdate = () => {
    let time = (audioRef.value?.currentTime as number) * 1000

    curtime.value = formatDuring((time as number) || 0)
    cur.value.style.width = (time * 100) / total + '%'
  }
})
</script>

<style scoped>
.audio {
}
.time {
  color: #666666;
}
.cover {
  width: 33px;
  border-radius: 5px;
}

.textMes {
  color: #e8e8e8;
  margin-bottom: 5px;
}
.song_name {
  margin-right: 10px;
}
.musicPlayer {
  border-top: 1px solid #000;
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 999;
  background-image: linear-gradient(#343333, rgba(0, 0, 0, 0.85));
}
.musicPlayer_container {
  height: 47px;
}
.total {
  display: inline-block;
  position: relative;
  width: 493px;
  height: 9px;
  border-radius: 20px;
  overflow: hidden;
  margin-right: 10px;
  background: #535353;
}
.cur {
  position: absolute;
  height: 9px;
  width: 0;
  background-color: #c70c0c;
}
.actions {
  padding-top: 2px;
}
.play {
  margin: 0 8px;
}
.coverBox {
  margin-left: 30px;
  margin-right: 15px;
}
</style>

<style lang="less">
.musicPlayer {
  .icon {
    width: 25px;
    height: 25px;
  }
  .play {
    width: 33px;
    height: 33px;
  }
}
</style>
